<!DOCTYPE html>
<html>
<head>
    {(common/meta.html)}
</head>

<body class="fixed-sidebar full-height-layout gray-bg">
<div id="wrapper">
    {(common/left_nav.html)}<!-- 左侧导航 -->

    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row J_mainContent">

            <!-- content start -->
            <div class="row content-header">
                <div class="col-md-12">
                    <div class="pull-left">
                        <h4 class="head_title">orange 节点管理</h4>
                    </div>
                    <div class="pull-right">

                        <a class="btn btn-default" href="javascript:void(0);" id="add-node-btn">
                            <i class="fa fa-filter"></i>
                            <span>添加节点</span>
                        </a>

                        <a class="btn btn-default" href="javascript:void(0);" id="reg-node-btn">
                            <i class="fa fa-filter"></i>
                            <span>注册节点</span>
                        </a>

                        <a id="switch-btn" style="display:none;" data-on="yes" class="btn btn-danger" rel="nofollow" href="javascript:void(0);">
                            <i class="fa fa-pause"></i>
                            <span>停用该插件</span>
                        </a>

                        <a id="clear-error-node-btn" class="btn btn-danger" rel="nofollow" href="javascript:void(0);">
                            <span>清除所有错误节点</span>
                        </a>

                        <a class="btn btn-primary" href="javascript:void(0);" id="sync-node-btn">
                            <i class="fa fa-refresh"></i>
                            <span>同步 orange 节点</span>
                        </a>


                    </div>
                </div>
            </div>

            <div class="row" id="table-view">
                <div class="col-md-12">
                    <table id="operable-table" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th class="center" width="60px">序号</th>
                            <th class="center" width="100">名称</th>
                            <th class="center" width="150px">IP</th>
                            <th class="center" width="80px">端口</th>
                            <th class="center" width="200px">创建/变更时间</th>
                            <th class="center" >状态</th>
                            <th class="center" width="150px">操作</th>
                        </tr>
                        </thead>
                        <tbody id="nodes" class="list"></tbody>
                    </table>
                </div>
            </div>

            <!-- content end -->
        </div>
    </div><!--右侧部分结束-->
</div>


<script id="node-item-tpl" type="text/template">
    {@each nodes as n, index}
    <tr>
        <td class="center">${parseInt(index)+1}</td>
        <td class="center">
            ${n.name}
        </td>
        <td class="center">${n.ip}</td>
        <td class="center">${n.port}</td>
        <td class="center">${n.op_time}</td>
        <td class="">
{@each n.sync_status as sync_status, plugin_name}
{@if sync_status === true }
<label class="label label-primary">${plugin_name}</label>
{@else}
<label class="label label-danger">${plugin_name}</label>
{@/if}
{@/each}
        </td>
        <td class="center do">
            <div class="btn-group" role="group" aria-label="...">

                <button type="button" class="btn btn-default statistic-btn" data-id="${n.id}" data-ip="${n.ip}" >
                    <i title="查看统计" class="fa fa-bar-chart"></i>
                </button>

                <button type="button" class="btn btn-default edit-node-btn" data-id="${n.id}" data-name="${n.name}"
                        data-ip="${n.ip}" data-port="${n.port}" data-api_username="${n.api_username}"
                        data-api_password="${n.api_password}"><i title="修改" class="fa fa-pencil"></i></button>

                <button type="button" class="btn btn-default delete-node-btn" data-id="${n.id}" data-name="${n.name}"><i
                    title="删除" class="fa fa-trash" style="color:#EA8282"></i></button>

            </div>
        </td>
    </tr>
    {@/each}
</script>

<script id="add-node-tpl" type="application/template">
    <div>
        <form id="add-node-form" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="name"
                           placeholder="1~20位, 只能输入字母、下划线、数字，必须以字母开头">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">IP</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="ip" placeholder="节点内网 IP 地址">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">端口</label>
                <div class="col-sm-10">
                    <input type="number" min="1" max="65535" class="form-control" name="port" placeholder="节点内网端口">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">API username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="api_username" placeholder="API username">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">API password</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="api_password" placeholder="API password">
                </div>
            </div>

        </form>
    </div>
</script>

<script id="edit-node-tpl" type="application/template">
    <div>
        <form id="edit-node-form" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${n.name}" name="name"
                           placeholder="1~20位, 只能输入字母、下划线、数字，必须以字母开头">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">IP</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${n.ip}" name="ip" placeholder="节点内网 IP 地址">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">端口</label>
                <div class="col-sm-10">
                    <input type="number" min="1" max="65535" class="form-control" id="port-input" value="${n.port}" name="port"
                           placeholder="节点内网端口">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">API username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${n.api_username}" name="api_username"
                           placeholder="API username">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">API password</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" value="${n.api_password}" name="api_password"
                           placeholder="API password">
                </div>
            </div>

        </form>
    </div>
</script>

<script id="sync-node-tpl" type="application/template">
    <div>
        将所有配置同步到所有 orange 节点，确认操作吗？
    </div>
</script>

{(common/selector-item-tpl.html)}

{(common/common_js.html)}<!-- 通用js -->
<script src="/static/js/node.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        APP.Common.resetNav("nav-node");
        APP.NodeManage.init();
    });
</script>
</body>
</html>
